<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<div class="portlet box green">
	<div class="portlet-title">
		<div class="caption">
			<i class="fa fa-gift"></i>
			<c:if test="${region != null }">地区编辑</c:if>
			<c:if test="${region == null }">地区添加</c:if>
		</div>
  </div>
  <div class="portlet-body form">
  	<form id="regionForm" class="form-horizontal form-bordered" action="/user/save" method="post" enctype="multipart/form-data">
  		
  		<div class="form-group">
        <label class="col-md-3 control-label">省:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <select name="province" class="form-control select2" 
	          		style="padding: 0;" required>
	          </select>
	        </div>
        </div>
      </div>
  		<div class="form-group">
        <label class="col-md-3 control-label">市:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <select name="city" class="form-control select2" 
	          		style="padding: 0;" required>
	          		
	          </select>
	        </div>
        </div>
      </div>
  		<div class="form-group">
        <label class="col-md-3 control-label">区:</label>
        <div class="col-md-4">
        	<div class="input-icon right">
	        	<i class="fa"></i>
	          <select name="district" class="form-control select2" style="padding: 0;" required>
	          </select>
	        </div>
        </div>
      </div>
      
       <div class="form-actions">
        <div class="col-md-9 col-md-offset-3">
          <button type="button" class="btn btn-primary" onclick="saveRegion(this)">
          	<spring:message code="btn.save"></spring:message>
          </button>
          <button type="reset" class="btn btn-default" onclick="cancel()">
          	<spring:message code="btn.return"></spring:message>
          </button>
        </div>
      </div>
      <input type="hidden" name="id" value="${region.id}">
  	</form>
  </div>
</div>
<script type="text/javascript" src="<c:url value="/static/custom/datepicker-util.js"></c:url>"></script>
<script type="text/javascript">

	$(function(){
		var url = "${webRoot}/province/list";
		$.post(url,{},function(result){
			if(result.code == 0) {
				$("select[name='province']").empty();
				$("select[name='province']").append("<option value=''>----------------</option>")
				$.each(result.data, function(index, item){
					$("select[name='province']").append("<option value='"+ item.name +"'"+
							"onclick=showCity('"+item.id+"')"+">"+ item.name +"</option>");
				})
			}else {
				layer.msg(result.message, {shift: 6});
			}
		})
	})
	
	function showCity(provinceId) {
		$("select[name='city']").empty();
		
		var url = "${webRoot}/city/findCitiesByProvinceId";
		$.post(url,{"provinceId":provinceId},function(result){
			if(result.code == 0) {
				$("select[name='city']").append("<option value=''>----------------</option>")
				$.each(result.data, function(index, item){
					$("select[name='city']").append("<option value='"+ item.name +"'"+
							"onclick=showDist('"+item.id+"')"+">"+ item.name +"</option>");
				})
			}else {
				layer.msg(result.message, {shift: 6});
			}
		})
	}
	
	function showDist(cityId) {
		$("select[name='district']").empty();
		
		var url = "${webRoot}/district/findDistrictByCityId";
		$.post(url,{"cid":cityId},function(result){
			if(result.code == 0) {
				$("select[name='district']").append("<option value=''>----------------</option>")
				$.each(result.data, function(index, item){
					$("select[name='district']").append("<option value='"+ item.name +"'>"+ item.name +"</option>");
				})
			}else {
				layer.msg(result.message, {shift: 6});
			}
		})
	}
	
	
	
	function saveRegion(obj){
		if($('#regionForm').valid()){
			
			var formData = new FormData($('#regionForm')[0]);
			$.ajax({
				type: 'post',
				url: '<c:url value="/region/save"></c:url>',
				data: formData,
				async: false,  
			    cache: false,  
			    contentType: false,  
			    processData: false, 
				dataType: 'json',
				success: function(data){
					if(data.code == 0) {
						layer.msg(data.message, {shift: 1});
						setTimeout(function(){
							search();
							$(".panel-search").show();
						}, 1200);
						
					}else{
						layer.msg(data.message, {shift: 6});
					}
				}
			});
		}
	}
</script>